<template>
	<div class="ion-view capital" id="capital">
		<ion-header>
			<div>
				真的无聊
			</div>
			<div>
				BTC人民币现货
			</div>
			<div>
				你好无聊啊
			</div>
		</ion-header>
		<ion-content class="has-header has-tabs">

			<swiper class="my-swipe" :options="swiperOption">
				<swiper-slide class="silde" v-for="banner in banners">
					<a v-bind:href="banner.adUrl" target="view_window">
						<img :src='banner.adPic' placeholder="http://static.m.maizuo.com/v4/static/app/asset/3d2cdb3bd9a23609aa2d84e7c2bfd035.png" />
					</a>
				</swiper-slide>
			</swiper>

			<!--<button v-on:click="addAtLast()">点我</button>

			<div>
				{{msg}}<br/>
			</div>
			<div>
				<my-component></my-component>
			</div>-->

			<div class="transaction_tag">
				<div :class="transaction_tag == 'buy' ? 'active' : '' " v-on:click="change_t_t('buy')">买入</div>
				<div :class="transaction_tag == 'sell' ? 'active' : '' " v-on:click="change_t_t('sell')">卖出</div>
			</div>

			<div style="padding:10px;">
				<div class="login_status" v-on:click="change_t_s('buy')">点击登录</div>
				<table class="transaction_main">
					<tr>
						<td v-on:click="change_t_s('')" :class="transaction_status == '' ? 'active' : '' ">限价</td>
						<td v-if="(transaction_tag+transaction_status == 'buy')">
							<div><label>可用￥0</label></div>
							<div class="xj">
								<div><input placeholder="卖出价CNY/BTC" id="bsjc1"></div>
								<div><input placeholder="卖出量BTC" id="bsjc2"></div>
							</div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'buy_market')">
							<div><label>可用￥0</label></div>
							<div class="xj">
								<div><input placeholder="卖出价CNY/BTC" id="bsjc1"></div>
								<div style="font-size:12px;line-height:50px;color:silver">以市场最优价格卖出</div>
							</div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'sell')">
							<div><label>可用฿0</label></div>
							<div class="xj">
								<div><input placeholder="卖出价CNY/BTC" id="bsjc1"></div>
								<div><input placeholder="卖出量BTC" id="bsjc2"></div>
							</div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'sell_market')">
							<div><label>可用฿0</label></div>
							<div class="xj">
								<div><input placeholder="卖出价CNY/BTC" id="bsjc1"></div>
								<div style="font-size:12px;line-height:50px;color:silver">以市场最优价格卖出</div>
							</div>
						</td>
					</tr>
					<tr>
						<td v-on:click="change_t_s('_market')" :class="transaction_status == '_market' ? 'active' : '' ">市价</td>
						<td v-if="(transaction_tag+transaction_status == 'buy')">
							<div>{{transaction_tag+transaction_status}}</div>
							<div></div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'buy_market')">
							<div>{{transaction_tag+transaction_status}}</div>
							<div></div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'sell')">
							<div>{{transaction_tag+transaction_status}}</div>
							<div></div>
						</td>
						<td v-else-if="(transaction_tag+transaction_status == 'sell_market')">
							<div>{{transaction_tag+transaction_status}}</div>
							<div></div>
						</td>
					</tr>
				</table>
			</div>

			<socket>
			</socket>

			<div class="p_main">
				<!--<ul class="left">
					<li ng-repeat="item in bids">
						<div class="up">
							<div>{{}}</div>
							<div>{{}}</div>
							<div style="padding-right: 10px;color: red;">买{{}}</div>
						</div>
						<div class="down" ng-style="{width:item[1]/50*100+'%'}"></div>
					</li>
				</ul>
				<ul class="right">
					<li ng-repeat="item in asks">
						<div class="up">
							<div style="padding-left: 10px;">卖{{}}</div>
							<div>{{}}</div>
							<div>{{}}</div>
						</div>
						<div class="down" ng-style="{width:item[1]/50*100+'%'}"></div>
					</li>
				</ul>
				<div ng-if="!(bids && asks)" style="height: 170px;">
					<div class="loader loading1">
						<div class="loader-inner ball-scale-multiple">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>-->
			</div>

			<div class="www">
				<div class="ooo">
					dsdd
				</div>
			</div>
			
			<!-- 路由匹配到的组件将渲染在这里 -->
    	<router-view></router-view>
			
			<button v-on:click="clickParent">点击</button>
			<input v-model="parentMsg">

			<ion-tabs :question="parentMsg" @input="incrementTotal" @inputee="incrementTotalee"></ion-tabs>

		</ion-content>
	</div>
</template>

<script>
	import socket from '../../modules/socket' //这里引入
	import store from '../../vuex/store'

	import {swiper,swiperSlide} from 'vue-awesome-swiper'
	import {mapGetters} from 'vuex'

	export default {
		name: 'capital',
		data() {
			return {
				banners: [],
				transaction_tag: 'buy',
				transaction_status: '',
				msg: 'Welcome to Your Vue.js App',
				menu_s: false,
				swiperOption: {
					autoplayDisableOnInteraction: false,
					autoplay: 3000,
				},
				transaction_p: {
					useruuid: 'd97820b8-e45d-47f1-ab1a-c4046f84d2b2',
					price: '7129.79',
					quantity: '0.0000',
					amount: '0.00',
					type: 'buy_market',
					paypwd: '',
					category: 'btc_cny'
				},
				parentMsg: '33333'
			}
		},
		components: {
			socket,
			swiper,
			swiperSlide
		}, //这里注册
		methods: {
			c_socket: function() {

			},
			addAtLast: function() {
				alert("是否打开模态框", 1).done(function(data) {
					if(data == 'ok') {
						store.dispatch('changeCount', 9)
						console.log(store)
					}
				});
			},
			change_t_t: function(type) {
				this.transaction_tag = type;
			},
			change_t_s: function(type) {
				this.transaction_status = type;
			},
			incrementTotal: function(type) {
				//				console.log(type)
			},
			incrementTotalee: function(type) {
				//				console.log(type)
			},
			clickParent: function() {
				console.log(this.$router.go)
//				this.$router.go(-1)
				this.$router.push({ path: 'market' })
			}
		},
		mounted() {
			var that = this;
			//获取banner
			this.lh_http('post', "showing/Banners", {
					type: 'h5',
				}).done(function(data) {
					//					console.log(data)
					that.banners = data.banners;
					//					console.log(_self.banners)
				})
				//获取深度
			store.dispatch('sned', {
				channel: 'sub_spot_btc_cny_dailydata'
			})

		},
		computed: {
			...mapGetters({
				socket_sned: 'getsocket_sned',
			})
		},
		beforeRouteLeave(to, from, next) {
			//	导航离开该组件的对应路由时调用
			//	可以访问组件实例 `this`
			console.log('宝宝离开这个页面了'+from)
			//	next(to)
			//	this.$route.route.go('/404')
			next();
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.my-swipe {
		height: 50px;
		text-align: center;
		overflow: hidden;
		background: white;
	}
	
	.silde img {
		width: 100%;
		height: 50px;
	}
	
	.transaction_tag {
		height: 50px;
	}
	
	.transaction_tag div {
		float: left;
		width: 50%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		color: silver;
	}
	
	.transaction_tag .active {
		border-bottom: solid 3px #1670b1;
		color: #000;
	}
	
	.transaction_main {
		box-shadow: 2px 2px 7px #888;
		border-radius: 2px;
		width: 100%;
		background: #fff;
		position: relative;
		margin-top: -180px;
		z-index: 1;
	}
	
	.transaction_main label:nth-child(1) {
		margin: 10px;
		float: left;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.42857;
	}
	
	.transaction_main tr td div {
		height: 45px;
	}
	
	.transaction_main tr td .xj {
		padding: 0 5px;
		overflow: auto;
	}
	
	.transaction_main tr td .xj div {
		padding: 0 5px;
		float: left;
		width: 50%;
	}
	
	.transaction_main tr td .xj div input {
		width: 100%;
		margin: 0;
		height: 34px !important;
		padding: 0;
	}
	
	.transaction_main tr td:nth-child(1) {
		background: #f8f8f8;
		width: 25px;
		vertical-align: middle;
		padding: 0 10px;
		color: #a9a7a7;
		border-right: 5px solid #f8f8f8;
	}
	
	.transaction_main tr .active {
		background: #fff!important;
		border-right: 5px solid #1670b1!important;
	}
	
	.login_status {
		height: 180px;
		background: rgba(192, 192, 192, .54);
		text-align: center;
		line-height: 180px;
		font-size: 30px;
		color: #fff;
	}
</style>